<template>
  <div class="router-view">
    <router-view />

    <van-tabbar v-model="active">
      <van-tabbar-item>
        <span>首页</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/images/nav/1.png" />
          <img v-if="!props.active" src="@/assets/images/nav/6.png" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>交易</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/images/nav/2.png" />
          <img v-if="!props.active" src="@/assets/images/nav/7.png" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>日志</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/images/nav/3.png" />
          <img v-if="!props.active" src="@/assets/images/nav/8.png" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>资讯</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/images/nav/4.png" />
          <img v-if="!props.active" src="@/assets/images/nav/9.png" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/images/nav/5.png" />
          <img v-if="!props.active" src="@/assets/images/nav/10.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  watch: {
    active(n) {
      switch (n) {
        case 0:
          this.$router.push("/home");
          break;

        case 1:
          this.$router.push("/trade");
          break;

        case 2:
          this.$router.push("/log");
          break;

        case 3:
          this.$router.push("/information");
          break;

        case 4:
          this.$router.push("/mine");
          break;

        default:
          break;
      }
    },
    $route(n) {
      // console.log(n);
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      switch (to.path) {
        case "/home":
          vm.active = 0;

          break;
        case "/trade":
          vm.active = 1;

          break;
        case "/log":
          vm.active = 2;

          break;
        case "/question":
          vm.active = 3;

          break;
        case "/mine":
          vm.active = 4;

          break;

        default:
          break;
      }
    });
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>
